<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="mescroll-master/mescroll.min.css">
    <link rel="stylesheet" href="../layui-v2.4.3/layui/css/layui.css">
    <style>
        html {
            overflow: hidden;
        }

        .mui-bar-nav~.mui-content {
            /* padding-top: 0;
            position: absolute;
            top: 44px; */
        }

        .layui-table,
        .layui-table-view {
            margin: 0;
        }

        .mescroll-downwarp .downwarp-content {
            /* width: 100%; */
            /* min-height: 30px;
            padding: 10px 0;
            position: fixed;
            top: 100px;
            width: 100%;
            left: 0; */
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">下拉刷新/上拉加载</h1>
    </header>
    <div class="mui-content">
        <table class="layui-hide" lay-filter="parse-table-demo">
            <thead>
                <tr>
                    <th lay-data="{field:'instanceNo'}">111</th>
                    <th lay-data="{field:'time'}">申请时间</th>
                    <th lay-data="{field:'coreCustomName'}">开票人</th>
                    <th lay-data="{field:'billTotalAmount'}">票面总金额</th>
                    <th lay-data="{field:'borrowAmount'}">融资额度</th>
                    <th lay-data="{field:'strInputStatus'}">状态</th>
                    <th lay-data="{field:'handle',width: 155,fixed: 'right'}">操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script src="../../js/mui.min.js"></script>
    <script src="../layui-v2.4.3/layui/layui.all.js"></script>
    <script src="mescroll-master/mescroll.min.js"></script>
    <script src="../../js/commom.js"></script>
    <script type="text/javascript">
        // 分页数据
        var pageConfig = {
            dataList: [],
            page: 0, //第几页
            count: 10, //每页条数量
        }
        // 初始化layui-table
        layuiTableInit('parse-table-demo', pageConfig, downCallback, upCallback);
        //监听行工具事件
        layui.table.on('tool(parse-table-demo)', function (obj) {
            var data = obj.data;
            // 事件绑定对应 ====> '添加按钮操作逻辑' 所设置的 lay-event 属性值
            if (obj.event === 'detail') {
                detail()
            } else if (obj.event === 'edit') {
                edit()
            } else if (obj.event === 'del') {
                del()
            }
        });
        //下拉刷新业务逻辑
        function downCallback(callback) {
            pageConfig.page = 0;
            setTimeout(function () {

                //ajax获取数据
                var res = {
                    data: [{ instanceNo: 10086, time: '申请时间', coreCustomName: '张三', billTotalAmount: '123312', borrowAmount: '123123', strInputStatus: '状态', }, { instanceNo: 10086, time: '申请时间', coreCustomName: '张三', billTotalAmount: '123312', borrowAmount: '123123', strInputStatus: '状态', }]
                }
                // 添加按钮操作逻辑
                let items = [];
                for (let index = 0; index < res.data.length; index++) {
                    const item = res.data[index];
                    let handle = '<a class="handle">详情</a><a class="handle">详情</a>';
                    item.handle = handle;
                    items.push(item);
                }
                pageConfig.dataList = items;
                // 重新渲染table
                layuiTableInit('parse-table-demo', pageConfig, downCallback, upCallback);

                console.log('downCallback 下拉刷新', pageConfig)
                //必须调用回调：结束下拉刷新
                callback();
            }, 1000)
        }
        // 上拉加载业务逻辑
        function upCallback(callback) {
            pageConfig.page++;
            setTimeout(function () {
                //ajax获取数据
                var res = {
                    data: [{ instanceNo: 10086, time: '申请时间', coreCustomName: '张三', billTotalAmount: '123312', borrowAmount: '123123', strInputStatus: '状态', }, { instanceNo: 10086, time: '申请时间', coreCustomName: '张三', billTotalAmount: '123312', borrowAmount: '123123', strInputStatus: '状态', }]
                }
                // 添加按钮操作逻辑
                for (let index = 0; index < res.data.length; index++) {
                    const item = res.data[index];
                    let handle = '<a class="handle" lay-event="detail">详情</a><a class="handle" lay-event="edit">编辑</a><a class="handle" lay-event="del">删除</a>';
                    item.handle = handle;
                    pageConfig.dataList.push(item);
                }
                // 重新渲染table
                layuiTableInit('parse-table-demo', pageConfig, downCallback, upCallback);

                console.log('upCallback 上拉加载', pageConfig);
                //必须调用回调：结束上拉加载
                res.data.length < pageConfig.count ? callback() : callback(true);//传入true为显示，无更多数据

            }, 1000)
        }
        // 操作按钮绑定事件
        function detail() {
            mui.toast('detail 详情')
        }
        function edit() {
            mui.toast('edit 编辑')
        }
        function del() {
            mui.toast('del 删除')
        }


        // 统一layui-table初始化 
        function layuiTableInit(layFilter, data, opations) {
            data = data || [];
            const hei = 50;
            let _table = layui.table.init(layFilter, { //转化静态表格
                id: layFilter,
                limit: Infinity,
                height: 'full-' + hei,
                cellMinWidth: 100,
                data: data.dataList,
                text: {
                    none: '' //默认：无数据
                },
                done: function () {
                    let pullRefresh = layuiTableMescrollInit(this, downCallback, upCallback, hei, opations);
                },
            });
            return _table;
        }
        //Mescroll 上拉加载/下拉刷新 heightFull:对应 table.options = {height:'full-heightFull'}
        function layuiTableMescrollInit(self, downCallback, upCallback, heightFull) {

            const index = self.index;
            let layui_table_view = document.querySelectorAll('.layui-table-view[lay-filter=LAY-table-' + index + ']')[0];
            let layui_table_main = layui_table_view.querySelectorAll('.layui-table-main')[0];
            let layui_table_fixed_body = layui_table_view.querySelectorAll('.layui-table-fixed .layui-table-body')[0];
            let layui_table_fixed_l = layui_table_view.querySelectorAll('.layui-table-fixed.layui-table-fixed-l')[0];
            let layui_table_fixed_r = layui_table_view.querySelectorAll('.layui-table-fixed.layui-table-fixed-r')[0];


            let mescroll = new MeScroll(layui_table_main, { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
                //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
                //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
                down: {
                    auto: false,
                    autoShowLoading: true,
                    callback: function () {
                        downCallback(function () {
                            mescroll.endErr();
                        })
                    }
                },//下拉刷新的回调
                up: {
                    auto: false,
                    callback: function () {

                        let self = this;
                        upCallback(function (showNoMore, text) {//showNoMore为true时，提示“无更多数据”
                            text = text || '无更多数据'
                            const isShowNoMore = showNoMore ? true : false;
                            // mescroll.endUpScroll(isShowNoMore)
                            if (isShowNoMore) {//无更多数据了
                                let mescroll_upwarp = document.querySelectorAll('.' + self.warpClass)[0];
                                let innerHTML = '<p class="upwarp-nodata">' + text + '</p>';
                                if (mescroll_upwarp) {
                                    mescroll_upwarp.innerHTML = innerHTML;
                                    mescroll_upwarp.style.visibility = 'visible';
                                }
                            }
                            mescroll.upwarp.lastChild.innerHTML = text
                        });
                    }, //上拉加载的回调

                }
            });
            // 初始化加载一次
            if (!pageConfig.isOneUpLoading) {
                pageConfig.isOneUpLoading = true;
                mescroll.triggerUpScroll();
            }

            let ml = layui_table_fixed_l ? layui_table_fixed_l.clientWidth / 2 : 0;
            let mr = layui_table_fixed_r ? -layui_table_fixed_r.clientWidth / 2 : 0;
            let heil = layui_table_fixed_l ? layui_table_fixed_l.clientHeight : 0;
            let heir = layui_table_fixed_r ? layui_table_fixed_r.clientHeight : 0;

            let viewHei = layui_table_view.clientHeight;
            if (layui_table_fixed_body) {
                if ((layui_table_fixed_l && heil > viewHei) ||
                    (layui_table_fixed_r && heir > viewHei)) {
                    layui_table_fixed_body.style.paddingBottom = heightFull + 'px';
                }
            }
            layui_table_main.classList.add('mescroll');

            let downwarp = mescroll.downwarp;
            let upwarp = mescroll.upwarp;
            ml = 0;
            mr = 0;
            downwarp.style.marginLeft = ml + mr + 'px';
            upwarp.style.marginLeft = ml + mr + 'px';

            upwarp.style.width = '100%';
            layui_table_main.addEventListener('scroll', function () {
                downwarp.style.marginLeft = this.scrollLeft + ml + mr + 'px';
                upwarp.style.marginLeft = this.scrollLeft + ml + mr + 'px';
            });
            layui_table_main.scroll();

            return mescroll;
        }
    </script>
</body>

</html>